<!-- eslint-disable vue/require-v-for-key -->
<template>
  <div
    class="header-container pointer-events-auto relative z-10 h-fit w-full overflow-hidden"
  >
    <BoLottie :animationData="jsonData" class="lottie-box"></BoLottie>
    <div class="screen-tools">
      <div class="relative flex items-center">
        <div class="back-icon mr-8" v-if="isActive != 0 && screenPermission">
          <Back></Back>
        </div>
        <span class="text-[0.938vw] font-[800] text-[#BCDBFF]">
          {{ currentTime }}
        </span>
      </div>
      <img src="/static/screen/title.png" class="title-img" draggable="false" />
      <div class="flex items-center">
        <template v-if="bimPermission">
          <template v-for="item in tabList">
            <div
              :class="[
                {
                  is_active: isActive == item.value,
                },
                'tab_item',
              ]"
              v-if="isShow"
              @click="onChange(item)"
            >
              {{ item.label }}
            </div>
          </template>
        </template>

        <img
          :src="isExpand ? hideImg : showImg"
          @click="onExpand"
          class="mr-4 h-[1.2vw] w-[1.2vw] cursor-pointer"
        />
        <CompressOutlined
          v-if="isFull"
          @click="onScale"
          style="font-size: 1vw; font-weight: 900; color: #a1ccff"
        />
        <ExpandOutlined
          v-else
          @click="onScale"
          style="font-size: 1vw; font-weight: 900; color: #a1ccff"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { computed, onMounted, ref, watch } from 'vue';
import { CompressOutlined, ExpandOutlined } from '@ant-design/icons-vue';
import { router } from '@boeyo/portal';
import { useUserStore } from '@boeyo/portal';
import { BoLottie } from '@boeyo/ui';
import { useIntervalFn } from '@vueuse/core';
import dayjs from 'dayjs';
import screenfull from 'screenfull';
import { useRoute } from 'vue-router';
import jsonData from '../../../json/big_title_top_bg.json';
import Back from './back/index.vue';
import hideImg from '/static/screen/hide.png';
import showImg from '/static/screen/show.png';

// center区域展开缩放
const isExpand = defineModel('isExpand');

const userStore = useUserStore();

const bimPermission = computed(() => {
  return (userStore.license.vipPaks as string[])?.includes('2');
});

const screenPermission = computed(() => {
  return (userStore.license.vipPaks as string[])?.includes('1');
});

const route = useRoute();
const isActive = ref(0);
watch(
  () => route.query,
  (val) => {
    isActive.value = val.active || 0;
    isExpand.value = false;
  },
  {
    immediate: true,
  },
);
const tabList = [
  {
    label: '三维场景',
    value: 2,
  },
  {
    label: '二维场景',
    value: 1,
  },
  {
    label: '地图场景',
    value: 3,
  },
];
const isShow = computed(() => {
  return route.fullPath.includes('active');
});

const onChange = (item) => {
  isActive.value = item.value;
  router.replace({
    path: '/screen',
    query: { active: isActive.value },
  });
};
const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
useIntervalFn(() => {
  currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
}, 1000);

// 缩放
const onScale = () => {
  const element = document.body;
  if (screenfull.isEnabled) {
    screenfull.toggle(element);
  }
};

const isFull = ref(false);
onMounted(() => {
  // 监听全屏事件
  screenfull.on('change', () => {
    isFull.value = screenfull.isFullscreen;
  });
});

// center区域展开缩放
const onExpand = () => {
  isExpand.value = !isExpand.value;
};
</script>

<style lang="scss" scoped>
.screen-tools {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  gap: 10px;

  .back-icon {
    &::after {
      position: absolute;
      content: '';
      top: 0.313vw;
      left: 1.667vw;
      width: 0.052vw;
      height: 0.729vw;
      background: #fff;
      opacity: 0.5;
    }
  }

  .title-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20vw;
  }
  .tab_item {
    font-size: 21px;
    font-weight: 700;
    text-align: center;
    height: 3.8vh;
    line-height: 3.5vh;
    cursor: pointer;
    width: 150px;
    margin-right: 30px;
    &.is_active {
      color: #77e5ff;
      background: url('/static/screen/is_active.png') no-repeat;
      background-size: 150% 80%;
      background-position: bottom;
    }
  }
}
.header-container {
  height: 7vh;
}
.lottie-box {
  height: 7vh;
  position: absolute;
  top: 0;
}
</style>
